<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat</title>

    <link href="../icons/message.png" rel="icon">
    <link rel="stylesheet" type="text/css" href="../css/login.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
    <div id="app">
        <div id="login">
                <form id="loginForm" action="#" method="post" @keyup.enter="login">
                    <h1 id="login_logo">LOGIN IN</h1>
                    <p>Username:<input id="username" name="username" v-model="loginForm.username" type="text" placeholder="请输入用户名" maxlength="11"></p>

                    <p>Password:<input id="password" name="password" v-model="loginForm.password" type="password" placeholder="请输入密码" autocomplete="off" maxlength="15"></p>

                    <p>验证码:<input type="text" v-model="loginForm.code" placeholder="请输入验证码"><img class="code" id="code" src="/users/getCode" @click="getCode"></p>

                    <p>记住密码:<input id="remember" name="remember" type="checkbox">
                    <a id="a_h" href="">忘记密码？</a>  
                    </p>

                    <div id="bt">
                        <input class="login_submit" @click="login" type="button" value="LOGIN UP">
                        <input class="login_submit" @click="toRegister" type="button" value="RESET">
                    </div>
                </form>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                loginForm:{}
            },
            created(){
            },
            methods:{
                //登录
                login(){
                    axios.post("http://localhost/users/login",this.loginForm).then(rsp => {
                        if (rsp.data.code == 20061) {
                            localStorage.setItem(this.loginForm.username,rsp.data.data)
                            this.$message.success(rsp.data.message);
                            setTimeout(() => {
                                location.href = "/pages/chat.html?"+this.loginForm.username;
                            },1000);
                        }else if(rsp.data.code == 20060){
                            this.$message.error(rsp.data.message);
                        }else {
                            this.$message.info(rsp.data.message);
                        }
                    })
                },
                //注册按钮跳转
                toRegister(){
                    location.href = "/pages/register.html";
                },
                getCode(){
                    let code = document.getElementById("code");
                    code.src = code.src + "?"+Math.random()*1000;
                }
            }
        })

    </script>

</body>
</html>